import React from 'react';
import { Box, LinearProgress } from '@mui/material';
import { styled } from '@mui/material/styles';

// 自定义样式的进度条容器
const ProgressContainer = styled(Box)(({ theme }) => ({
  position: 'relative',
  width: '100%',
  height: 10,
  backgroundColor: '#e0e0e0',
  borderRadius: 5,
  overflow: 'hidden'
}));

// 修改进度文字容器
const ProgressText = styled(Box)(({ theme }) => ({
  position: 'absolute',
  width: '100%',
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  zIndex: 1,
  fontSize: '0.875rem',
  fontWeight: 500,
  userSelect: 'none',
  textShadow: '0px 0px 2px rgba(255, 255, 255, 0.7)', // 添加文字阴影
}));

// 自定义样式的线程进度条
const ThreadProgress = styled(Box)(({ theme }) => ({
  position: 'absolute',
  height: '100%',
  transition: 'width 0.1s linear',
  backgroundColor: theme.palette.primary.main,
}));

export default function MultiThreadProgress({ 
  threadProgress, 
  totalSize,
  height = 20,
  sx = {},
  progress = 0,
}) {
  // 根据进度决定文字颜色
  const textColor = progress > 50 ? '#fff' : '#000';

  return (
    <ProgressContainer sx={{ height, ...sx }}>
      <ProgressText sx={{ color: textColor }}>
        {progress.toFixed(2)}%
      </ProgressText>
      {threadProgress.length > 0 ? (
        // 多线程下载显示多个进度条
        threadProgress.map((thread) => {
          const startPercent = (thread.start_pos / totalSize) * 100;
          const endPercent = (thread.end_pos / totalSize) * 100;
          const currentPercent = (thread.current_pos / totalSize) * 100;
          const progressWidth = currentPercent - startPercent;

          return (
            <ThreadProgress
              key={thread.thread_id}
              sx={{
                left: `${startPercent}%`,
                width: `${progressWidth}%`,
                backgroundColor: `hsl(${(thread.thread_id * 137.508) % 360}, 70%, 45%)`,
                opacity: 0.85,
              }}
            />
          );
        })
      ) : (
        // 单线程下载显示单个进度条
        <ThreadProgress
          sx={{
            left: 0,
            width: `${progress}%`,
            backgroundColor: '#1976d2',  // 使用默认的主题蓝色
            opacity: 0.85,
          }}
        />
      )}
    </ProgressContainer>
  );
} 